<template>
  <div id="manage">
    <!-- 查询部分 -->
    <div class="condition">
      <div class="firstInput">
        <p>功能名称</p>
        <el-input class="input" size="small" clearable v-model="searchParam.module" placeholder="请输入功能名称"></el-input>
      </div>
      <div class="firstInput">
        <p>执行操作</p>
        <el-input class="input" size="small" clearable v-model="searchParam.optType" placeholder="请输入执行操作"></el-input>
      </div>
      <div class="secondInput">
        <p>操作时间</p>
        <el-date-picker size="small" value-format="yyyy-MM-dd HH:mm:ss" v-model="region" start-placeholder="开始日期" end-placeholder="结束日期" type="datetimerange" align="right"></el-date-picker>
      </div>
      <el-button class="conditionBtn" size="small" type="primary" @click="curPage=1;refresh()" v-if="power.query">
        查询
      </el-button>
      <el-button class="conditionBtn" size="small" type="danger" @click="batchDelete()" v-if="power.batchDelete">
        批量删除</el-button>
    </div>
    <!-- 表格 -->
    <el-table :data="tableData" stripe :max-height="tableMaxHeight" class="table" border>
      <el-table-column v-for="column in columns" header-align="center" :fixed="column.fixed" :prop="column.prop" :align="column.align" :label="column.label" :width="column.width" :key="column.label"></el-table-column>
      <el-table-column prop="profile" header-align="center" align="left" label="详细参数" min-width="300" show-overflow-tooltip>
        <template slot-scope="{ row }">
          <span class="show-overflow">{{row.optContent}}</span>
        </template>
      </el-table-column>

      <el-table-column v-for="(column, index) in columnsTow" header-align="center" :fixed="column.fixed" :align="column.align" :prop="column.prop" :label="column.label" :width="column.width" :key="index"></el-table-column>
      <el-table-column fixed="right" label="操作" width="80" align="center" v-if="power.delete">
        <template slot-scope="scope">
          <el-button type="text" class="dangerTextBtn" @click="handleDelete(scope.$index, scope.row)" v-if="power.delete">
            删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination class="page" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="curPage" :page-sizes="[10, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageTotal"></el-pagination>
  </div>
</template>
<script>
  import moment from "moment";
  export default {
    name: "sysLogs",
    data() {
      var that = this;
      // 获取按钮权限
      let power = {
        query: this.$util.btnShow("sysLogs.query"), //查询
        delete: this.$util.btnShow("sysLogs.delete"), //删除
        batchDelete: this.$util.btnShow("sysLogs.batchDelete"), // 批量删除
      };
      return {
        clientHeight: document.body.clientHeight, //窗口可视区域高度
        ref: "form",
        isDisabled: true, //表单是否可以编辑
        tableMaxHeight: 0, //表格的最大高度
        power: power, // 按钮显隐控制权限
        curPage: 1,
        pageSize: 10,
        pageTotal: 0,
        //搜索条件
        searchParam: {
          module: "",
          optType: "",
          startTime: "",
          endTime: "",
        },
        region: "", //查询日期
        tableData: [],
        //表格列配置
        columns: [
          { fixed: false, prop: "module", label: "功能名称", width: "180", align: 'left' },
          { fixed: false, prop: "optType", label: "执行操作", width: "150", align: 'center' },
        ],
        columnsTow: [
          { fixed: false, prop: "createBy", label: "操作人", width: "160", align: 'center' },
          { fixed: false, prop: "createTime", label: "操作时间", width: "160", align: 'center' },
        ],
      };
    },
    mounted() {
      var that = this;
      if (window.screen.height == 1080) {
        this.pageSize = 20;
      } else {
        this.pageSize = 10;
      }
      this.formParam = this.$util.clone_str(this.formParamDefault);
      this.refresh();
      this.$nextTick(function() {
        //设置表格的最大高度
        setTimeout(function() {
          that.tableMaxHeight = that.$util.setTableMaxHeight();
        }, 500);
      });
      window.onresize = () => {
        return (() => {
          window.clientHeight = document.body.clientHeight;
          that.clientHeight = window.clientHeight;
        })();
      };
    },
    watch: {
      // 可视区变化 调整表格高度
      clientHeight(val) {
        let that = this;
        setTimeout(function() {
          that.$nextTick(function() {
            heightSet();
            that.tableMaxHeight = that.$util.setTableMaxHeight();
          });
        }, 500);
      },
    },
    methods: {
      // 分页
      handleSizeChange(val) {
        this.pageSize = val;
        this.refresh();
      },
      handleCurrentChange(val) {
        this.curPage = val;
        this.refresh();
      },
      // 数据请求和查询
      refresh() {
        let that = this;

        if (this.region) {
          this.searchParam.startTime = moment(new Date(that.region[0])).format("YYYY-MM-DD HH:mm:ss");
          this.searchParam.endTime = moment(new Date(that.region[1])).format("YYYY-MM-DD HH:mm:ss");
        } else {
          this.searchParam.startTime = "";
          this.searchParam.endTime = "";
        }

        var param = new FormData();
        param.append("module", this.searchParam.module);
        param.append("optType", this.searchParam.optType);
        param.append("startTime", this.searchParam.startTime);
        param.append("endTime", this.searchParam.endTime);
        param.append("curPage", this.curPage);
        param.append("pageSize", this.pageSize);

        that.$req.get(param, api.urlSysLogsPage, function(_r) {
          that.tableData = _r.data.records;
          that.pageTotal = _r.data.total;
        });
      },
      //   删除
      handleDelete(index, row) {
        let that = this;
        this.$util.msgbox.confrim("确定删除此日志信息?", function() {
          let param = new FormData();
          param.append("id", row.id);
          that.$req.post(param, api.urlSysLogsDelete, function(_r) {
            that.$util.notify.success("删除成功");
            that.refresh();
          });
        });
      },
      //   批量删除
      batchDelete() {
        let that = this;
        if (this.region) {
          this.searchParam.startTime = moment(new Date(that.region[0])).format("YYYY-MM-DD HH:mm:ss");
          this.searchParam.endTime = moment(new Date(that.region[1])).format("YYYY-MM-DD HH:mm:ss");
        } else {
          this.searchParam.startTime = "";
          this.searchParam.endTime = "";
          that.$util.notify.warning("请选择操作时间！");
          return;
        }
        this.$util.msgbox.confrim("确定删除 " + that.searchParam.startTime + " 至 " + that.searchParam.endTime + " 段内的运行日志么?",
          function() {
            let param = new FormData();
            param.append("startTime", that.searchParam.startTime);
            param.append("endTime", that.searchParam.endTime);
            that.$req.post(param, api.urlSysLogsDeleteByTime, function(_r) {
              that.$util.notify.success("删除成功");
              that.refresh();
            });
          }
        );
      },
    },
  };
</script>

<style scoped lang='scss'>
  #manage {
    @include routerView;
  }

  .firstInput {
    @include inputLocation(250px);
  }

  .secondInput {
    @include inputLocation(480px);
    margin-left: 10px;
  }

  .table {
    @include table;
  }

  .show-overflow {
    white-space: nowrap;
  }

  .page {
    @include page;
  }

  .condition {
    @include condition;
  }

  .line {
    @include line;
  }

  .conditionBtn {
    @include conditionBtn;
    margin-top: 0px !important;
  }
</style>
<style lang='scss'>
  .dialogForm {
    @include dialogForm;
  }

  .el-tooltip__popper {
    max-width: 40% !important;
    font-size: 14px;
  }

  .el-tooltip__popper,
  .el-tooltip__popper.is-dark {
    max-width: 40% !important;
    line-height: 24px;
    font-size: 14px;
    color: rgb(255, 255, 255) !important;
    background-color: rgb(49, 49, 49) !important;
  }
</style>